<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="搜索" left-arrow @click-left="$router.back()" />
    </header>
    <main class="content">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <van-empty image="search" description="暂无搜索到" v-if="list.length==0" />
      <div v-else v-for="item in list" :key="item.id">
        <van-card
         
          :price="item.price"
          :title="item.title"
          :thumb="item.image"
        />
      </div>
    </main>
  </div>
</template>

<script setup>
import {onMounted,ref} from 'vue'
import request from '@/utils/request'
const list = ref([])
const value = ref('')
const query = ()=>{
    request.get('/search',{
        params:{
            value:value.value
        }
    }).then(res=>{
        if(res.data.code==200){
            list.value=res.data.data
        }
    })
}

const onSearch=()=>{
    query()
}
const onCancel=()=>{
    query()
}
onMounted(()=>{
    query()
})
</script>